<template>
    <div>
    <!-- 搜索 -->
    <search-bar @onSearch="onSearch"></search-bar>
    <!-- 新增商品分类 -->
    <el-button type="primary" @click="showAddModal">新增商品分类</el-button>
    <!-- 表格 -->
      <el-table
      :data="cates"
      style="width: 100%"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="cateName" label="分类名" ></el-table-column>
      <el-table-column prop="cateIcon" label="分类图标">
        <template #default="scope">
        <!-- 通过 v-bind: 动态渲染图片 -->
        <img :src="scope.row.cateIcon" alt="" width="50">
      </template>
      </el-table-column>
      <el-table-column prop="enable" label="是否启用" >
        <template #default="scope">
          <div>
          <!-- 是否启用 -->
        <el-switch
         v-model="scope.row.enable"
         inline-prompt
         active-text="是"
         inactive-text="否"
         @change="switchEnable(scope.row.id,scope.row.enable)"
        />
        </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作" >
        <template #default="scope">
        <!-- 编辑按钮 -->
          <el-button type="primary" @click="showUpdateModal(scope.row.id)">编辑</el-button>
          <!-- 删除按钮 -->
          <el-button type="danger" @click="delCate(scope.row.id)">删除</el-button>
        </template>
        </el-table-column>
    </el-table>
    <el-dialog v-model="addModalShow" title="新增商品" width="40%">
    <!-- 新增商品分类的弹窗 -->
      <cate-add :cates="cates"/>
    </el-dialog>
    <el-dialog v-model="updateModalShow" title="修改商品" width="40%">
    <!-- 修改商品分类的弹窗 -->
      <cate-update :cates="cates" :id="cateId"/>
    </el-dialog>
    </div>
</template>

<script>
import { fetchCates, updateCate, delCate } from '../../api/cateList'
import SearchBar from '@/components/SearchBar.vue'
import CateAdd from './components/CateAdd.vue' // 引入新增 子组件
import CateUpdate from './components/CateUpdata.vue' // 引入修改 子组件
export default {
  name: 'cateLists',
  data () {
    return {
      cates: [], // 商品分类数据的初始值
      cateId: -1, // 商品分类id的初始值
      addModalShow: false, // 新增商品分类弹窗
      updateModalShow: false // 修改商品分类弹窗
    }
  },
  methods: {
    // 删除商品分类数据
    delCate (id) {
      this.$confirm('确认要删除吗？', '删除').then(() => {
        delCate(id).then(res => {
          if (res.data.code === 200) {
            this.$message({
              type: 'success',
              message: res.data.msg
            })
            this.fetchCates()
          }
        })
      })
    },
    onSearch (searchParams) {
      // 搜索栏
      this.searchParams = searchParams
      this.fetchCates()
    },
    // 调用feahCates 获取商品分类数据
    fetchCates () {
      fetchCates({
        ...this.searchParams
      }).then(res => {
        if (res.data.code === 200) {
          this.cates = res.data.data
        }
      })
    },
    switchEnable (id, enable) {
      // 只改按钮状态是不行的，还得发请求
      updateCate({
        id,
        enable
      }).then(res => {
        if (res.data.code === 200) {
          this.$message({
            type: 'success',
            message: '修改成功'
          })
          this.fetchCates()
        }
      })
    },
    showAddModal () { // el-button上
      // 触发时新增
      this.addModalShow = true
    },
    showUpdateModal () {
      this.updateModalShow = true
    }
  },
  created () {
    // 在这里调用 获取商品分类数据
    this.fetchCates()
  },
  components: {
    SearchBar,
    CateAdd,
    CateUpdate
  }
}
</script>

<style>
</style>
